<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约拍平台 - 个人主页</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .profile-header {
            background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
            height: 160px;
            position: relative;
        }
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            background-color: white;
        }
        .tab-active {
            color: #3b82f6;
            border-bottom: 2px solid #3b82f6;
        }
        .gallery-img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }
        .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #ef4444;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <!-- 状态栏和导航栏将通过JS加载 -->
    
    <div class="pt-7 pb-20">
        <!-- 个人资料头部 -->
        <div class="profile-header">
            <div class="absolute top-3 right-4 text-white">
                <i class="fas fa-cog text-xl"></i>
            </div>
            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="profile-avatar">
        </div>
        
        <!-- 个人信息 -->
        <div class="mt-12 text-center px-4">
            <h1 class="text-xl font-bold">李写真</h1>
            <div class="text-sm text-gray-500 mt-1">日系风格摄影师 · 上海</div>
            <div class="flex justify-center mt-2">
                <div class="bg-blue-50 text-blue-500 text-xs px-2 py-1 rounded-full mr-2">
                    <i class="fas fa-check-circle mr-1"></i>认证摄影师
                </div>
                <div class="bg-yellow-50 text-yellow-500 text-xs px-2 py-1 rounded-full">
                    <i class="fas fa-star mr-1"></i>4.9分
                </div>
            </div>
            
            <div class="flex justify-center space-x-8 mt-4">
                <div class="text-center">
                    <div class="font-bold">128</div>
                    <div class="text-xs text-gray-500">作品</div>
                </div>
                <div class="text-center">
                    <div class="font-bold">3.5k</div>
                    <div class="text-xs text-gray-500">粉丝</div>
                </div>
                <div class="text-center">
                    <div class="font-bold">256</div>
                    <div class="text-xs text-gray-500">关注</div>
                </div>
            </div>
            
            <div class="mt-4 flex justify-center space-x-3">
                <button class="bg-blue-500 text-white px-6 py-1.5 rounded-full text-sm">
                    <i class="fas fa-user-plus mr-1"></i>关注
                </button>
                <button class="bg-white border border-gray-300 text-gray-700 px-6 py-1.5 rounded-full text-sm">
                    <i class="far fa-comment mr-1"></i>私信
                </button>
            </div>
            
            <div class="mt-4 text-sm text-gray-700 px-4">
                专注日系小清新风格人像摄影，5年摄影经验，曾获多项摄影大赛奖项。擅长引导模特自然摆姿，打造舒适拍摄体验。
            </div>
            
            <!-- 添加登录和认证链接 -->
            <div class="bg-white p-4 mb-4">
                <div class="flex items-center">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-16 h-16 rounded-full object-cover mr-4">
                    <div class="flex-1">
                        <div class="font-bold text-lg">Sarah</div>
                        <div class="text-sm text-gray-500">摄影师 | 上海</div>
                    </div>
                    <a href="login.html" class="bg-blue-500 text-white px-4 py-1 rounded-full text-sm">登录</a>
                </div>
                
                <div class="flex justify-between mt-4">
                    <div class="text-center">
                        <div class="font-bold">128</div>
                        <div class="text-xs text-gray-500">关注</div>
                    </div>
                    <div class="text-center">
                        <div class="font-bold">256</div>
                        <div class="text-xs text-gray-500">粉丝</div>
                    </div>
                    <div class="text-center">
                        <div class="font-bold">64</div>
                        <div class="text-xs text-gray-500">作品</div>
                    </div>
                    <a href="certification.html" class="text-center">
                        <div class="font-bold text-blue-500"><i class="fas fa-certificate"></i></div>
                        <div class="text-xs text-gray-500">认证</div>
                    </a>
                </div>
            </div>
            
            <!-- 订单管理 -->
            <div class="bg-white p-4 mb-4">
                <h2 class="text-lg font-bold mb-4">订单管理</h2>
                
                <div class="grid grid-cols-4 gap-2 text-center">
                    <a href="payment.html" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-1">
                            <i class="fas fa-wallet text-blue-500"></i>
                        </div>
                        <div class="text-xs">待付款</div>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-1">
                            <i class="fas fa-camera text-blue-500"></i>
                        </div>
                        <div class="text-xs">待拍摄</div>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-1">
                            <i class="fas fa-image text-blue-500"></i>
                        </div>
                        <div class="text-xs">待交付</div>
                    </a>
                    <a href="review.html" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-1">
                            <i class="fas fa-star text-blue-500"></i>
                        </div>
                        <div class="text-xs">待评价</div>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 标签页 -->
        <div class="mt-6 border-b border-gray-200">
            <div class="flex">
                <div class="flex-1 py-3 text-center tab-active">作品集</div>
                <div class="flex-1 py-3 text-center text-gray-500">约拍服务</div>
                <div class="flex-1 py-3 text-center text-gray-500">评价</div>
            </div>
        </div>
        
        <!-- 作品集 -->
        <div class="p-1">
            <div class="grid grid-cols-3 gap-1">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1513379733131-47fc74b45fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                    <div class="absolute bottom-2 right-2 text-white text-xs">
                        <i class="fas fa-heart"></i> 128
                    </div>
                </div>
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                    <div class="absolute bottom-2 right-2 text-white text-xs">
                        <i class="fas fa-heart"></i> 95
                    </div>
                </div>
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1534008897995-27a23e859048?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                    <div class="absolute bottom-2 right-2 text-white text-xs">
                        <i class="fas fa-heart"></i> 210
                    </div>
                </div>
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1504276048855-f3d60e69632f?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                    <div class="absolute bottom-2 right-2 text-white text-xs">
                        <i class="fas fa-heart"></i> 76
                    </div>
                </div>
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                    <div class="absolute bottom-2 right-2 text-white text-xs">
                        <i class="fas fa-heart"></i> 182
                    </div>
                </div>
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-1.2.1&auto=format&fit=crop&w=662&q=80" class="gallery-img">
                    <div class="absolute bottom-2 right-2 text-white text-xs">
                        <i class="fas fa-heart"></i> 143
                    </div>
                </div>
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                    <div class="absolute bottom-2 right-2 text-white text-xs">
                        <i class="fas fa-heart"></i> 256
                    </div>
                </div>
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" class="gallery-img">
                    <div class="absolute bottom-2 right-2 text-white text-xs">
                        <i class="fas fa-heart"></i> 118
                    </div>
                </div>
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="gallery-img">
                    <div class="absolute bottom-2 right-2 text-white text-xs">
                        <i class="fas fa-heart"></i> 89
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 快捷功能 -->
        <div class="fixed right-4 bottom-20 flex flex-col space-y-3">
            <button class="bg-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg">
                <i class="fas fa-camera text-xl"></i>
            </button>
        </div>
    </div>
    
    <script>
        // 加载组件
        document.addEventListener('DOMContentLoaded', function() {
            // 创建iOS状态栏
            const statusBar = document.createElement('div');
            statusBar.className = 'bg-black text-white h-7 flex items-center justify-between px-4 text-xs fixed top-0 left-0 right-0 z-50';
            statusBar.innerHTML = `
                <div>
                    <span>9:41</span>
                </div>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            `;
            document.body.prepend(statusBar);
            
            // 创建底部导航栏
            const bottomNav = document.createElement('div');
            bottomNav.className = 'fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 h-16 flex justify-around items-center px-2 z-10';
            bottomNav.innerHTML = `
                <a href="home.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="explore.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-compass text-xl"></i>
                    <span class="text-xs mt-1">发现</span>
                </a>
                <a href="publish.html" class="flex flex-col items-center">
                    <div class="bg-blue-500 text-white rounded-full w-12 h-12 flex items-center justify-center">
                        <i class="fas fa-plus text-xl"></i>
                    </div>
                </a>
                <a href="messages.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-comment text-xl"></i>
                    <span class="text-xs mt-1">消息</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-blue-500">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            `;
            document.body.appendChild(bottomNav);
        });
    </script>
</body>
</html> 